<template>
  <div id="home">
    <h2 @click="getVal">TinyMCE</h2>
    <editor :init="init" v-model="baseData.content"></editor>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watch } from "vue";
import Editor from "@tinymce/tinymce-vue";
interface init {}
export default defineComponent({
  name: "Tinymce",
  components: {
    editor: Editor,
  },
  setup() {
    const init = reactive<init>({
      // 插件
      plugins: `lists, advlist, anchor, autolink, autoresize, autosave, emoticons, fullscreen, help, hr, image,
      save, table, charmap, `,

      // 插件配置
      autoresize_bottom_margin: 500,
      autosave_interval: "300s",
      save_enablewhendirty: false,
      save_onsavecallback: function () { alert('已保存'); }, 

      // 工具栏按钮
      toolbar: `bullist numlist anchor emoticons fullscreen help image save table charmap`,

      language: "zh_CN",
      height: 500,
      menubar: true, // 菜单条
      toolbar_sticky: true, //粘性工具栏
      selector: "#textarea1", //
      body_id: "edit_area",
      placeholder: "请输入文本...",
      images_upload_handler: uploadimg,
    });
    const baseData = reactive({
      content: "",
    });

    const getVal = ()=> {
      console.log(baseData.content);
    }
    function uploadimg() {}

    return {
      init,
      baseData,
      getVal,
    };
  },
});
</script>

<style scoped>
</style>